<template>
     <div class="app-container">
         <!-- 基础信息 -->
        <h5 class="titleInfo">
            基础信息
        </h5>
        <el-form class="form" ref="form" :rules="rules" :model="form" label-width="130px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="realname">
                        <el-input v-model="form.realname"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号" prop="username">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="级别" prop="roleId">
                        <el-select v-model="form.roleId" placeholder="请选择">
                            <el-option
                            v-for="item in roleOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="加盟金额" prop="money">
                        <el-input type="number" v-model="form.money"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="交钱分公司" prop="payBranchId">
                        <el-select v-model="form.payBranchId" placeholder="请选择">
                            <el-option
                            v-for="item in payOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="账户类型" prop="type">
                        <el-select v-model="form.type" placeholder="请选择">
                            <el-option
                            v-for="item in typeOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="招商地区" prop="province">
                        <el-cascader
                            :options="options"
                            v-model="selectedOptions"
                            @change="pcaList">
                        </el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="合同时间">
                        <el-date-picker
                            value-format="yyyy-MM-dd HH:mm:ss"
                            v-model="form.signTime"
                            type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

        <!-- 推荐人信息 -->
        <div class="divBar"></div>
        <h5 class="titleInfo">
            推荐人信息
        </h5>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="推荐人姓名" prop="referUser">
                        <span v-if="list1.refereeName" class="spanToInput">{{list1.refereeName | filterNull}}</span>
                        <el-input v-else v-model="form.referUser"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="推荐人手机号" prop="referUserPhone">
                        <span v-if="list1.referee" class="spanToInput">{{list1.referee| filterNull}}</span>
                        <el-input v-else v-model="form.referUserPhone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

         <!-- 实名认证信息 -->
         <div class="divBar"></div>
        <h5 class="titleInfo">
            实名认证信息
        </h5>

            <el-row  v-if="list1">
                <el-col :span="12">
                    <el-form-item label="证件类型" prop="idCardType">
                        <span v-if="list1.identityType" class="spanToInput">{{list1.identityType | cardNull}}</span>
                        <el-select v-else v-model="form.idCardType" placeholder="请选择">
                            <el-option
                            v-for="item in cardOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="证件号码" prop="idCard">
                        <span v-if="list1.identity" class="spanToInput">{{list1.identity | filterNull}}</span>
                        <el-input v-else v-model="form.idCard"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        <!-- 银行卡信息 -->
        <div class="divBar"></div>
        <h5 class="titleInfo">
            银行卡信息
        </h5>

            <el-row v-for="(val,index) in list2" :key="index">
                <el-col :span="12">
                    <el-form-item label="开户行">
                        <span class="spanToInput">{{val.bankName | filterNull}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="银行卡号">
                        <span class="spanToInput">{{val.cardNumber | filterNull}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row  v-if="list2.length==0">
                <el-col :span="12">
                    <el-form-item label="开户行" prop="banksDTOListName">
                        <el-input v-model="form.banksDTOListName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="银行卡号" prop="banksDTOListCard">
                        <el-input v-model="form.banksDTOListCard"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button style="margin:30px 0" type="primary" @click="submitFn('form')" >立即提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { vipInfo } from '@/api/vipInfo'
import { companyList } from '@/api/branchOfficeDropDown'
import { joinFacilitator } from '@/api/joinFacilitator'

// 手机号正则
const phoneReg = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请输入会员手机号"));
  } else {
    const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
    if (reg.test(value)) {
      callback();
    } else {
      return callback(new Error('手机格式错误'))
    }
  }
}
export default {
    name:"joinFacilitator",
    data(){
        return {
            dates:"",
            form:{
                banksDTOListName:"",
                banksDTOListCard:"",
                userId:"",
                createdBy:0,
                realname:"",
                username:"",
                roleId:"",
                money:"",
                payBranchId:"",
                type:"",
                province:"",
                city:"",
                area:"",
                signTime:"",
                referUser:"",
                referUserPhone:"",
                idCardType:"",
                idCard:"",
                banksDTOList:[{
                    name:"",
                    card:""
                }]
            },
            rules: {
                realname: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                username: [
                    { required: true, validator: phoneReg, trigger: 'blur' },
                ],
                roleId:[
                    { required: true, message: '请选择级别', trigger: 'blur' },
                ],
                money:[
                    { required: true, message: '请输入加盟金额', trigger: 'blur' },
                ],
                payBranchId:[
                    { required: true, message: '请选择交钱分公司', trigger: 'blur' },
                ],
                type:[
                    { required: true, message: '请选择账户类型', trigger: 'blur' },
                ],
                province:[
                    { required:true,message: '请输入省市区', trigger: 'blur'}
                ],
                referUser:[
                    { required:true,message: '请输入推荐人姓名', trigger: 'blur'}
                ],
                referUserPhone:[
                    { required:true,validator: phoneReg, trigger: 'blur'}
                ],
                idCardType:[
                    { required: true, message: '请选择证件类型', trigger: 'blur' },
                ],
                idCard:[
                    { required: true, message: '请输入证件号码', trigger: 'blur' },
                ],
                banksDTOListName:[
                    { required: true, message: '请输入开户行', trigger: 'blur' },
                ],
                banksDTOListCard:[
                    { required: true, message: '请输入银行卡号', trigger: 'blur' },
                ]
            },
            list1:{},
            list2:[],
            options:[],
            roleOption:[],
            payOption:[],
            cardOption:[],
            typeOption:[],
            selectedOptions: []
        }
    },
    filters:{
        filterNull(e) {
            if(!e){
                return "暂无"
            }else{
                return e
            }
        },
        cardNull(e){
            return window.helper.cardType(e)
        }
    },
    watch:{
        'form.roleId'(val) {
            if(val!==2){
                this.form.type = ""
            }
        },
        'form.type'(val) {
            if(val==4){
                this.form.roleId = "2"
                this.form.type = "4"
            }
        }
    },
    mounted(){
        this.form.userId = Number(this.$route.query.userId)
        this.getList()
        // 省市区数据获取
        var addData = require('../../../../static/address/area.json')
        this.options = addData
        //分公司列表
        this.getCompanyList()
        //账户类型
        this.typeOption = window.helper.accountType("listReturn")
        //身份证类型
        this.cardOption = window.helper.cardType("listReturn")
        //角色
        this.roleOption = window.helper.roleFn("listReturn")
    },
    methods:{
        // 省市区数据改变
        pcaList(value) {
            let e = this.selectedOptions
            e = value
            this.form.province = e[0]
            this.form.city = e[1]
            this.form.area = e[2]
        },
        //获取数据
        getList(){
            let datas = {userId:this.form.userId}
            vipInfo(datas).then().then(res =>{
                if(!res.data.code){
                    if(res.data.data.user){
                        this.list1 = res.data.data.user
                    }
                    if(res.data.data.bankCard){
                        this.list2 = res.data.data.bankCard
                    }
                    let tf = this.form
                    // 提交前对已有数据进行处理
                    tf.referUser = this.list1.refereeName
                    tf.referUserPhone = this.list1.referee
                    tf.idCardType = this.list1.identityType
                    tf.idCard = this.list1.identity
                    if(this.list2.length>0){
                        this.formTs.banksDTOListName = ""
                        this.formTs.banksDTOListCard = ""
                    }
                }else{
                    this.$message.error("数据接口访问失败");
                }
            })
            .catch(error =>{
                this.$message.error(error);
            })
        },
        //获取分公司列表
        getCompanyList(){
            companyList().then(res =>{
                let resData = res.data.data
                let newData = [];
                resData.forEach(e => {
                    newData.push({
                        value:e.id,
                        label:e.name
                    })
                });
                this.payOption = newData
            })
            .catch(error =>{
                this.$message.error(error);
            })
        },
        // 提交
        submitFn(e){
            this.$refs[e].validate((valid) => {
                if (valid) {
                    let datas = this.form
                    joinFacilitator(datas).then().then(res =>{
                        if(!res.data.code){
                            this.$message({
                                message: '加入成功',
                                type: 'success'
                            });
                            this.$router.push('/vipIndex')
                        }else{
                            this.$message.error("数据接口访问失败");
                        }
                    })
                    .catch(error =>{
                        this.$message.error(error);
                    })
                }else{
                    this.$message({
                        message: '有必填项没填，不能提交咯',
                        type: 'warning'
                    });
                }
            })
        }
    }
}
</script>
<style scoped>
.app-container{padding: 0px!important}
</style>
